<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Google Maps API サンプル010</title>
    <!-- Google AJAX API Loader を読み込み -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA3HEaipgCJKasbKv8S1gdbBQJvmiF4_fYAiwv-0nW9Cym48ujhRSyNm4dRS6pZoq24h-LzB1RCTbVjg"></script>
    <script type="text/javascript">
    GM = null;
    gddSample = {}; // Global変数格納

    google.load("jquery", "1.3.2"); // jQueryを読み込み
    google.load("maps", "2", { language: 'ja' }); // Google Maps API を読み込み
    google.setOnLoadCallback(initialize); // body.onloadを代替
    
    // 初期化用関数
    function initialize() {
      GM = google.maps; // 省略形

      if (!GM.BrowserIsCompatible()) {
        alert("申し訳ありません、ご利用のブラウザはサポートしておりません。");
        return;
      }

      var map = new GM.Map2($("#map_canvas")[0]); // 地図オブジェクトの生成

      // アクセス元のIPアドレスより現在地を推定
      if(google.loader.ClientLocation){
        var cl = google.loader.ClientLocation;
        var loc = new GM.LatLng(cl.latitude, cl.longitude);
      }else{
        var loc = new GM.LatLng(35.458608,139.635758)  ;
      }

      map.setCenter(loc,15); // 中心位置の緯度経度とズームレベルの設定
      map.setUIToDefault(); // デフォルトのUI部品の設定

      var gc = new GM.ClientGeocoder();  // 全体で一回だけ生成しておけばOK 
      gddSample.geocoder = gc;
      gddSample.map = map;

      // map上でのクリックイベントに対しての処理を定義
      GM.Event.addListener(map, 'click', function(ol,loc){
        doRevGeocode(ol,loc);
        if(gddSample.svoverlay){
          preparePanorama(loc);  
        }
      });
      
      initializeButtons();
    }

    // ボタンの動作設定用関数
    function initializeButtons(){
      $('#geocode').click(doGeocode);
      $('#addmarker').click(addMarker);
      $('#inputtext').keypress(function(e){ if(e.which == 13) doGeocode();});
      $('#streetview').click(function(){
        if($(this).attr('checked')===true){ showStreetviewOverlay(); }
        else{ clearStreetviewOverlay(); }
      });
    }

    // 入力文字列→緯度経度を推測
    function doGeocode(){
      var text = $('#inputtext').attr("value");
      if(text){
         gddSample.geocoder.getLatLng(text, function(loc){ // ClientGeocoderを使って入力文字列から緯度経度を推測
           if(!loc){ alert(text + 'を特定することができませんでした'); }
          else{ gddSample.map.setCenter(loc); }
        });
      }
    }

    // 緯度経度→住所を推測
    function doRevGeocode(ol, loc){
      gddSample.geocoder.getLocations(loc, function(res){ // 緯度経度→住所
        if (!res || res.Status.code != 200) {
         alert("Status Code:" + res.Status.code);
        }else {
          $("#inputtext").attr({value: res.Placemark[0].address});
        }
      });  
    }

    // 地図の中心にマーカーを追加、入力文字列があればInfoWindowも追加
    function addMarker(){
      var map = gddSample.map;

      var mrk = new GM.Marker(map.getCenter()); // 地図の中心にMarkerを生成
      map.addOverlay(mrk); // map上に配置しないと表示されない

      var text = $('#inputtext').attr("value");
      if(text){
        var html = '<p style="font-weight:bold">'+text+'</p>';
        GM.Event.addListener(mrk,'click',function(){
          mrk.openInfoWindowHtml(html);   // クリックされたらinfoWindowを開く
        });
        GM.Event.trigger(mrk,'click'); //  クリックイベントを発生させる
      }
    }

    // StreetviewOverlay を追加
    function showStreetviewOverlay(){
      if(!gddSample.svoverlay){
        var ol = gddSample.svoverlay = new GM.StreetviewOverlay();
        gddSample.map.addOverlay(ol);
      }
    }

    // StreetviewOverlay を削除
    function clearStreetviewOverlay(){
      if(gddSample.svoverlay){
        gddSample.map.removeOverlay(gddSample.svoverlay);
        delete gddSample.svoverlay;    
      }
    }

    // 与えられた緯度経度から最寄りのStreetviewを検索
    function preparePanorama(loc){
      var map = gddSample.map;
      var sv = gddSample.street;
      if(!sv){ gddSample.street = sv = new GM.StreetviewClient(); }

      sv.getNearestPanoramaLatLng(loc,function(ll){
        if(!ll){
          alert('クリックされた場所の近くにStreetviewを見つけられませんでした');
        }else{
          var mrk = new GM.Marker(ll,{ draggable: true, bouncy: true });
          map.addOverlay(mrk);
        }
      });
    }

    </script>
  </head>
  <body>
    <input type="text" id="inputtext" />
    <input type="button" id="geocode", value="場所検索" />
    <input type="button" id="addmarker", value="マーカー追加" /><br />
    <input type="checkbox" id="streetview" /><label for="streetview" style="font-size:0.8em">ストリートビュー</label>
  
    <!-- 地図描画用のDIVタグ -->
    <div id="map_canvas" style="width:800px; height:600px;"></div>
  </body>
</html>
